<template>
  <view class="flex-col page">
    <view class="flex-col group ">
      <!-- 顶部 -->
      <view class="flex-row items-center top_fixd">
        <view class="flex-row justify-start items-center image-wrapper">
          <image
            class="image_3"
            src="../../static/wx/95b7a5fad0a412fe3bd35de0ef17104a.png"
          />
        </view>
        <view class="flex-row justify-start items-center image-wrapper ml-111">
          <image
            class="image"
            src="../../static/wx/50f6f320614121f96260d67234494fde.png"
          />
        </view>
        <view
          class="flex-col justify-start items-start relative image-wrapper ml-111"
        >
          <image
            class="image_2"
            src="../../static/wx/049b6c9267c87dbc0fc80a6c3b5e5bb1.png"
          />
          <view class="flex-col justify-start items-center text-wrapper pos"
            ><text class="text">1</text></view
          >
        </view>
      </view>
      <!-- 搜索&分类 -->
      <view class="flex-col top-box view mt-top">
        <!-- <view class="flex-row justify-between self-start section">
          <text class="text_2">输入关键词搜索</text>
          <image class="image_4" src="../../static/wx/21ebc00749465741e917e6e7d40fd100.png" />
        </view> -->
        <u-search
          placeholder="输入关键词搜索"
          :showAction="false"
          :clearabled="false"
          placeholderColor="#ffffff"
          v-model="keyword"
          margin="0 50rpx 0 0"
          height="80rpx"
          bgColor="#ffffff"
        ></u-search>

        <view class="mt-20 flex-row self-stretch top-box">
          <scroll-view class="scroll-view-top" scroll-x="true">
            <view
              class="ml-16 flex-col shrink-0 tag-box active"
              v-for="(item, index) in 5"
              :key="index"
            >
              <view class="flex-col justify-start items-center image-wrapper_2 ">
                <image
                  class="image_7"
                  src="../../static/wx/38d1a36be26262c75db631ebcea27d5c.png"
                />
              </view>
              <text class="font text_3 mt-13">乡村振兴</text>
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- 抢购&精选 -->
      <view class="flex-row top-box mt-29">
        <view class="flex-col shrink-0 self-center list-box">
          <view class="flex-col items-center">
            <text class="font_2 text_5">限</text>
            <text class="font_2 text_6">时</text>
            <text class="font_2 text_7">抢</text>
            <text class="font_2 text_8">购</text>
          </view>
          <view class="flex-col items-center mt-33">
            <text class="font_4 text_12">商</text>
            <text class="font_4 text_13">品</text>
            <text class="font_4 text_14">精</text>
            <text class="font_4 text_15">选</text>
          </view>
        </view>
        <view class="shrink-0 self-start line-box"></view>
        <view class="flex-col justify-start items-start shrink-0 top-goods">
          <view class="flex-row horiz-list top-goods-boxs">
            <scroll-view class="scroll-view-goods" scroll-x="true">
              <view
                class="flex-col justify-start top-goods-box horiz-list-item ml-15"
                v-for="(item, index) in 4"
                :key="index"
              >
                <view class="flex-col top-goods-box-name">
                  <text class="self-stretch font_3 text_9"
                    >蜡笔小新懒人手机支架</text
                  >
                  <text class="mt-8 self-center font_5">￥44.5</text>
                </view>
                <image
                  class="image_9 pos_3"
                  src="../../static/wx/185fc55a314365f9a7610b14dd95f9d5.png"
                /> </view
            ></scroll-view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="mt-40 flex-col recommend ">
      <view class="flex-col recommend-box">
        <!-- 爆品推荐 -->
        <view class="flex-col">
          <view class="flex-row justify-between items-baseline">
            <text class="font_6 text_16">爆品推荐</text>
            <text class="font_7">查看全部</text>
          </view>
          <view class="mt-20 flex-row">
            <view class="flex-col flex-1">
              <image
                class="image_12"
                src="../../static/wx/b62761c61c5fbfe78e8a56286b3d9d21.png"
              />
              <text class="font_9 mt-23"
                >8字拉力器女拉伸练背神器 家用瑜伽健身</text
              >
            </view>
            <view
              class="flex-col items-start shrink-0 self-start recommend-box-top ml-11"
            >
              <image
                class="shrink-0 image_13"
                src="../../static/wx/7363c4eddab180a9aa043a470f04ad73.png"
              />
              <text class="font_8 text_17">天然真乳胶</text>
              <text class="font_8 text_18">拉力器</text>
              <image
                class="shrink-0 image_13 image_14"
                src="../../static/wx/0c6fecb57051e6a6bc89f008741c6b73.png"
              />
              <text class="font_8 text_19">开肩美背</text>
              <text class="font_8 text_20">纤细手臂</text>
            </view>
          </view>
        </view>
        <!-- 大商品列表 -->
        <view
          class="flex-row justify-between items-baseline recommend-box-footer"
        >
          <text class="font_6 text_21">商品列表</text>
          <text class="font_7">查看更多</text>
        </view>
        <view class="flex-row goods-list">
          <view
            class="flex-col goods-list-box goods-list-item"
            v-for="(item, index) in 4"
            :key="index"
          >
            <view class="flex-col items-start">
              <image
                class="image_15"
                src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png"
              />
              <text class="font_9 text_22 text_23">加热鞋垫暖足贴加热鞋垫暖足贴加热鞋垫暖足贴</text>
              <text class="font_10 text_25">自发热暖宝宝</text>
            </view>
            <view class="mt-10 flex-row items-center group_10">
              <text class="font_5">￥19.5</text>
              <image
                class="shrink-0 image_18 image_19"
                src="../../static/wx/bc36df84586e9202a50f65912343e35a.png"
              />
              <image
                class="shrink-0 image_16 image_17"
                src="../../static/wx/8a22762f483b718a2770f34e14df6152.png"
              />
            </view>
          </view>
        </view>
        <!-- 小商品列表 -->
        <view class="flex-row justify-between items-baseline footer-goods">
          <text class="font_6 text_26">商品列表</text>
          <text class="font_7">查看更多</text>
        </view>
        <view class="flex-col footer-goods-boxs"  v-for="(item, index) in 3"
        :key="index">
          <view class="flex-row self-stretch section_11">
            <image
              class="shrink-0 self-center image_20"
              src="../../static/wx/6faa657a28939849251414e6088bfd42.png"
            />
            <text class="self-start font text_27 ml-19 single-line"
              >鲜京采 原装进口厄瓜多尔白原装进口厄瓜多尔白</text
            >
          </view>
          <text class="self-end font_11 text_28"
            >特大号20-30规格 33-50只/盒</text
          >
        </view>
      </view>

    </view>
    <!-- 底部 -->
    <view class="footer-gap"></view>
    <view class="flex-row justify-between items-center relative footer">
        <view class="flex-row items-center">
          <image
            class="footer-home"
            src="../../static/nav/home_active.png"
          />
          <image
            class="ml-46 footer-bill"
            src="../../static/nav/bill.png"
          />
        </view>
        <view class="flex-row">
          <image
            class="footer-favorite"
            src="../../static/nav/favorite.png"
          />
          <image
            class="ml-44 footer-profile"
            src="../../static/nav/profile.png"
          />
        </view>
        <image
              class="mt-30 self-center footer-add"
              src="../../static/nav/add.png"
            />
      </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="css">
/* @import "@/static/jd/base.scss"; */
.ml-111 {
  margin-left: 222rpx;
}

.mt-29 {
  margin-top: 58rpx;
}

.mt-33 {
  margin-top: 66rpx;
}

.mt-23 {
  margin-top: 16rpx;
}

.ml-11 {
  margin-left: 22rpx;
}

.ml-15 {
  margin-left: 30rpx;
}

.ml-13 {
  margin-left: 26rpx;
}

.ml-19 {
  margin-left: 38rpx;
}

.mt-11 {
  margin-top: 22rpx;
}

.page {
  padding-top: 20rpx;
  background-image: url(https://dcdn.it120.cc/2025/03/23/974925be-1a1b-4d42-83df-9c4779e00fda.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  background-color: #ffffff;
}

.group {
  padding-left: 52rpx;
}

.image-wrapper {
  width: 64rpx;
}

.image_3 {
  width: 64rpx;
  height: 26rpx;
}

.image {
  width: 50rpx;
  height: 68rpx;
}

.image_2 {
  width: 48rpx;
  height: 52rpx;
}

.text-wrapper {
  padding: 12rpx 0;
  background-color: #ffffff;
  border-radius: 50%;
  width: 34rpx;
}

.pos {
  position: absolute;
  right: 0;
  top: 0;
}

.text {
  color: #f08000;
  font-size: 20rpx;
  font-family: Mukta;
  font-weight: 700;
  line-height: 12.6rpx;
}

.top-box {
  overflow-x: hidden;
}

.view {
  margin-left: 4rpx;
}

.section {
  padding: 32rpx;
  background-color: #ffffff26;
  border-radius: 40rpx;
  width: 638rpx;
}

.text_2 {
  color: #ffffff;
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 29.72rpx;
}

.image_4 {
  width: 30rpx;
  height: 30rpx;
}

.image_5 {
  width: 178rpx;
  height: 248rpx;
  display: inline-block;
}

.section_2 {
  margin-bottom: 10rpx;
  padding: 20rpx 0 84rpx;
  background-color: #ffffffcc;
  border-radius: 32rpx;
  width: 178rpx;
  height: 238rpx;
  display: inline-block;
}

.section_5 {
  background-color: #d7e4ff;
  border-radius: 30rpx;
  width: 140rpx;
  height: 134rpx;
}

.image_6 {
  width: 108rpx;
  height: 186rpx;
}

.pos_2 {
  position: absolute;
  left: 50%;
  bottom: 18rpx;
  transform: translateX(-50%);
}

.tag-box {
  margin-bottom: 10rpx;
  padding: 16rpx 18rpx 32rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 32rpx;
  width: 178rpx;
  height: 238rpx;
  display: inline-block;
}
.tag-box:last-child {
  margin-right: 30rpx;
}

.tag-box.active {
  background-color: rgba(255, 255, 255, 1);
}

.image-wrapper_2 {
  padding: 20rpx 0 14rpx;
  background-color: #d7e4ff;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}

.image_7 {
  width: 102rpx;
  height: 100rpx;
}

.font {
  font-size: 32rpx;
  font-family: Lantinghei SC;
  line-height: 30.12rpx;
  color: #000000;
}

.text_3 {
  margin-left: 8rpx;
  color: #16162e;
  line-height: 30.26rpx;
}

.tag-box-active {
  margin-bottom: 6rpx;
  padding: 16rpx 0 36rpx 16rpx;
  background-color: #d7e4ff99;
  border-radius: 40rpx 0 0 40rpx;
  box-shadow: 0rpx 14rpx 12rpx #f67b7b4d inset;
  width: 154rpx;
  height: 242rpx;
  display: inline-block;
}

.image-wrapper_3 {
  padding: 22rpx 0;
  background-color: #fdf2ec99;
  border-radius: 30rpx 0 0 30rpx;
}

.image_8 {
  width: 82rpx;
  height: 90rpx;
}

.text_4 {
  margin-left: 8rpx;
  line-height: 30rpx;
}

.list-box {
  width: 33.92rpx;
}

.font_2 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 34rpx;
  color: #000000;
}



.font_4 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 34rpx;
  font-weight: 600;
  color: #000000;
}
.tag_active .font_2{
	font-size: 32rpx;
	font-weight: bold;
}

.line-box {
  margin-left: 12rpx;
  margin-top: 298rpx;
  background-color: #000000;
  width: 4rpx;
  height: 98rpx;
}

.line-box2 {
  margin-top: 110rpx;
}

.top-goods {
  margin-left: 32rpx;
  padding: 42rpx 0 58rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  width: 682rpx;
  height: 504rpx;
}

.horiz-list {
  margin-left: 12rpx;
}

.top-goods-boxs {
  overflow-x: auto;
}

.top-goods-box {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
}

.horiz-list-item {
  padding: 112rpx 0 8rpx;
  width: 222rpx;
}
.horiz-list-item:last-child {
  margin-right: 30rpx;
}

.top-goods-box-name {
  padding: 108rpx 32rpx 44rpx;
  background-color: #d7e4ff;
  border-radius: 32rpx;
  width: 222rpx;
}

.font_3 {

  font-size: 28rpx;
  font-family: Lantinghei SC;
  line-height: 33rpx;
  color: #000000;
}

.text_9 {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 显示的行数，可自行修改 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.font_5 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 20.46rpx;
  color: #000000;
}

.image_9 {
  width: 180rpx;
  height: 192rpx;
}

.pos_3 {
  position: absolute;
  right: 16rpx;
  top: 12rpx;
}

.text_10 {
  text-align: center;
}

.image_10 {
  width: 170rpx;
  height: 186rpx;
}

.pos_4 {
  position: absolute;
  left: 50%;
  top: 10rpx;
  transform: translateX(-50%);
}

.group_5 {
  padding: 112rpx 0 8rpx;
  width: 198.28rpx;
}

.text-wrapper_2 {
  padding: 112rpx 0 32rpx;
  background-color: #d7e4ff;
  border-radius: 32rpx 0 0 32rpx;
  width: 198rpx;
}

.text_11 {
  text-align: center;
  width: 156rpx;
}

.image_11 {
  width: 124rpx;
  height: 152rpx;
}

.pos_5 {
  position: absolute;
  right: 24.28rpx;
  top: 48rpx;
}

.recommend {
  padding-top: 80rpx;
  background-color: #ffffff;
  border-radius: 60rpx 60rpx 0 0;
}

.recommend-box {
  padding-left: 56rpx;
  padding-right: 40rpx;
}

.font_6 {
  font-size: 36rpx;
  font-family: Laila;
  line-height: 34rpx;
  font-weight: 700;
  color: #3a7beb;
}

.text_16 {
  line-height: 33.94rpx;
}

.font_7 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 26.46rpx;
  font-weight: 700;
  color: #979797;
}

.image_12 {
  border-radius: 40rpx;
  width: 398rpx;
  height: 490rpx;
}

.font_9 {
  font-size: 28rpx;
  font-family: Lantinghei SC;

  line-height: 33rpx;
  color: #000000;
}

.recommend-box-top {
  margin-right: 16rpx;
  margin-top: 6rpx;
  width: 200rpx;
}

.image_13 {
  border-radius: 30rpx;
  width: 218rpx;
  height: 180rpx;
}

.font_8 {
  font-size: 28rpx;
  font-family: Lantinghei SC;
  line-height: 42rpx;
  color: #000000;
}

.text_17 {
  margin-top: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text_18 {
  margin-top: -8rpx;
}

.image_14 {
  margin-top: 20rpx;
}

.text_19 {
  margin-top: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text_20 {
  margin-top: -8rpx;
}

.recommend-box-footer {
  margin-top: 56rpx;
}

.text_21 {
  line-height: 33.94rpx;
}

.goods-list {
  margin-right: 16rpx;
  margin-top: 44rpx;
  flex-wrap: wrap;
}

.goods-list-box {
  flex: 1 1 304rpx;
}

.goods-list-item {
  padding: 16rpx 16rpx 40rpx;
  background-color: #f7f8fc;
  border-radius: 32rpx;

 
  height: 460rpx;
  margin-bottom: 20rpx;
  margin-right: 20rpx;
}

.goods-list-item:nth-child(2n) {
  margin-right: 0;
}

.image_15 {
  border-radius: 32rpx;
  width: 264rpx;
  height: 264rpx;
}

.text_22 {
  margin-left: 12rpx;
  margin-top: 24rpx;
}

.text_23 {
  width: 202rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.font_10 {
  font-size: 28rpx;
  font-family: Mukta;
  line-height: 26.46rpx;
  color: #9c9db9;
}

.text_25 {
  margin-left: 16rpx;
  margin-top: 8rpx;
  line-height: 25.98rpx;
}

.group_10 {
  padding: 0 8rpx;
}

.image_18 {
  width: 26rpx;
  height: 22rpx;
}

.image_19 {
  margin-left: 36rpx;
}

.image_16 {
  width: 52rpx;
  height: 52rpx;
}

.image_17 {
  margin-left: 22rpx;
}

.text_24 {
  width: 200rpx;
}

.footer-goods {
  margin-top: 72rpx;
}

.text_26 {
  line-height: 33.94rpx;
}

.footer-goods-boxs {
  margin-right: 16rpx;
  margin-top: 44rpx;
  height: auto;
}

.section_11 {
  padding: 16rpx 18rpx;
  background-color: #f7f8fc;
  border-radius: 40rpx;
}

.image_20 {
  border-radius: 30rpx;
  width: 134rpx;
  height: 134rpx;
}

.text_27 {
  margin-top: 28rpx;
  line-height: 30.38rpx;
}

.font_11 {
  font-size: 28rpx;
  font-family: Lantinghei SC;
  color: #9c9db9;
}

.text_28 {
  margin-right: 72rpx;
  margin-top: -84rpx;
  line-height: 48rpx;
  width: 378rpx;
}

.group_13 {
  margin-top: 16rpx;
}

.text_29 {
  line-height: 26.46rpx;
}

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 430rpx;
}

.scroll-view-top {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-goods {
  white-space: nowrap;
  width: 600rpx;
}

::v-deep .u-search__content {
  background: rgba(255, 255, 255, 0.3) !important;
}

::v-deep .u-search__content__input {
  background: none !important;
  color: #fff !important;
}

::v-deep .u-search__content__input::placeholder {
  color: #fff !important;
}

::v-deep .u-search__content__icon .u-icon__icon {
  font-size: 50rpx !important;
  color: #fff !important;
}

.top_fixd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 0 10rpx 50rpx;
  background: #42a3f4;
  z-index: 99;
}

.mt-top {
  margin-top: 100rpx;
}
</style>